<!--
 * @Author: GKN
 * @Date: 2024-03-25 14:27:11
 * @LastEditTime: 2024-03-25 15:30:37
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\specialSubject\s2\home.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <Card1 :title="tabs[1].name" :more="false" @moreClick="" style="margin-top:20px;">
        <template v-slot:main1>
            <div class="m3 MarT back-fff" style="height:742px;">
                <el-carousel width="100%" height="742px" direction="horizontal" indicator-position="none" :interval="3500">
                    <el-carousel-item v-for="item in list1" :key="item" @click="goInfo(item,tabs[1].name)" style="position:reactive;">
                        <div style="height: 638px;">
                            <imgView :src="item.thumb"  />
                        </div>
                        <div>
                            <div class="title-16-left font-text-al-l omit" style="margin-top: 26px;">{{ item.name }}</div>
                            <div class="font-content font-text-al-l omit-2" style="margin-top:14px;">{{ item.blurb }}</div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </template>
    </Card1>
    <div style="margin-top:20px;">
        <el-row :gutter="20">
            <el-col :span="12">
                <Card1 :title="tabs[2].name" :more="false" @moreClick="" >
                    <template v-slot:main1>
                        <div style="height: 355px;overflow-y: auto;overflow-x:hidden; ">
                            <div v-for="(item,i) in list2" :key="i" @click="goInfo(item,tabs[2].name)">
                                <el-row :gutter="20">
                                    <el-col :span="12" v-if="item.thumb">
                                        <div style="height: 164px;"><imgView :src="item.thumb"/></div>
                                    </el-col>
                                    <el-col :span="item.thumb?12:24">
                                        <div :class="item.thumb?'title-16-left font-text-al-l omit-3':'title-16-left font-text-al-l omit'" style="margin-top: 26px;">{{ item.name }}</div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </template>
                </Card1>
            </el-col>
            <el-col :span="12">
                <Card1 :title="tabs[3].name" :more="false" @moreClick="" >
                    <template v-slot:main1>
                        <div style="height: 355px;overflow-y: auto;">
                            <div v-for="(item,i) in list3" :key="i" @click="goInfo(item,tabs[3].name)">
                                <div class="title-16-left font-text-al-l omit" style="margin-top: 10px;">{{ item.name }}</div>
                                <div class="font-content font-text-al-l omit-2" style="margin-top:12px;">{{ item.blurb }}</div>
                            </div>
                        </div>
                    </template>
                </Card1>
            </el-col>
            
        </el-row>
    </div>
    <Card1 :title="tabs[4].name" :more="false" @moreClick="" style="margin-top:20px;">
        <template v-slot:main1>
            <div style="margin-top: 10px;height: 445px;">
                <el-row :gutter="20">
                    <el-col :span="16">
                        <div class="border-r6 po-re" style="height: 445px;">
                            <imgView :src="list4.length>0?list4[0].thumb:''"></imgView>
                            <div class="po-ab0 xf-font" style="width: 100%;text-align: left;">
                                {{list4.length>0?list4[0].name:''}}
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div style="height: 445px;padding-top:16px ;">
                            <div style="height: 25%;" v-for="(item,i) in list4" :key="i" class="cursor-p" @click="goInfo(item,tabs[4].name)">
                                <div class="title-16-left font-text-al-l omit-3">{{ item.name }}</div>
                            </div>                                                         
                        </div>
                    </el-col>
                </el-row>
            </div>
        </template>
    </Card1>
    <Card1 :title="tabs[5].name" :more="false" @moreClick="" style="margin-top:20px;">
        <template v-slot:main1>
            <div style="margin-top: 10px;height: 706px;" class="flex flex-w">
                <div v-for="(item,i) in list5" :key="i" style="width: 33.3%;padding: 10px;" @click="goInfo(item,tabs[5].name)">
                    <imgView style="height:225px;" :src="item.thumb"></imgView>
                    <div class="title-16-left font-text-al-l omit" style="margin-top: 10px;">{{ item.name }}</div>
                    <div class="font-content font-text-al-l omit-3" style="margin-top:12px;">{{ item.blurb }}</div>
                </div>
            </div>
        </template>
    </Card1>
    <div class="MarT back-fff" >
        <adImgView src="" @click="proxy.$comJs.openUrl()"></adImgView>
    </div>
</template>

<script setup>
import { ref,getCurrentInstance,defineProps } from "vue";
const { proxy } = getCurrentInstance();
import CryptoJS from 'crypto-js';
import { useRoute, useRouter } from "vue-router";
const Router = useRouter();
import Card1 from '@/view/components/card1.vue';
// ----------------------------------------------------------------------
const porps = defineProps({
    tabs:{
        type:Object,
        default:[]
    }
})
const tabs = porps.tabs
const list1 = ref([])
const list2 = ref([])
const list3 = ref([])
const list4 = ref([])
const list5 = ref([])

const getList=()=>{
    porps.tabs.map((item,i)=>{
        console.log(item)
        if(i == 1){
            proxy.$http.request(proxy.$api.topicChildList+'?cid='+item.id+'&nextTag=0&pageSize=6&rankTag=2','get',{},false, function (res) {
                if(res&&res.data){
                    console.log(res)
                    if(res.data.data.list!= undefined){
                        list1.value = res.data.data.list
                    } 
                }
            })
        }
        if(i == 2){
            proxy.$http.request(proxy.$api.topicChildList+'?cid='+item.id+'&nextTag=0&pageSize=6&rankTag=2','get',{},false, function (res) {
                if(res&&res.data){
                    console.log(res)
                    if(res.data.data.list!= undefined){
                        list2.value = res.data.data.list
                    } 
                }
            })
        }
        if(i == 3){
            proxy.$http.request(proxy.$api.topicChildList+'?cid='+item.id+'&nextTag=0&pageSize=6&rankTag=2','get',{},false, function (res) {
                if(res&&res.data){
                    console.log(res)
                    if(res.data.data.list!= undefined){
                        list3.value = res.data.data.list
                    } 
                }
            })
        }
        if(i == 4){
            proxy.$http.request(proxy.$api.topicChildList+'?cid='+item.id+'&nextTag=0&pageSize=6&rankTag=2','get',{},false, function (res) {
                if(res&&res.data){
                    console.log(res)
                    if(res.data.data.list!= undefined){
                        list4.value = res.data.data.list
                    } 
                }
            })
        }
        if(i == 5){
            proxy.$http.request(proxy.$api.topicChildList+'?cid='+item.id+'&nextTag=0&pageSize=6&rankTag=2','get',{},false, function (res) {
                if(res&&res.data){
                    console.log(res)
                    if(res.data.data.list!= undefined){
                        list5.value = res.data.data.list
                    } 
                }
            })
        }
    })
}
getList()
const goInfo=(item,name)=>{
    const routeUrl = Router.resolve({
        path:'/animatedly/info_zt',
        query:{
            ob:proxy.$comJs.encry({
                title:name,
                id:item.pid,
                path:'/animatedly/list',
                first_title:'成果库',
                first_path:-1
            })
        }
    });
    window.open(routeUrl.href, "_blank");
}
</script>

<style>

</style>